<script setup lang="ts">
import { ref, watch } from 'vue'
import { useRouter } from 'vue-router'
import type { CheckboxValueType } from 'element-plus'

const router = useRouter()
const input = ref<string>('')

const isActiveIndex = ref<number>(0)
const active = (e: any) => {
  isActiveIndex.value = Number(e.target.dataset.id)
  isActiveIndex.value === 0
    ? router.push('/function/discuss/new-reply')
    : router.push('/function/discuss/new-publish')
}

const checkAll = ref<boolean>(false)
const indeterminate = ref<boolean>(false)
const value = ref<CheckboxValueType[]>([])
const selectList = ref([
  {
    value: 'Beijing',
    label: 'Beijing'
  },
  {
    value: 'Shanghai',
    label: 'Shanghai'
  },
  {
    value: 'Nanjing',
    label: 'Nanjing'
  },
  {
    value: 'Chengdu',
    label: 'Chengdu'
  },
  {
    value: 'Shenzhen',
    label: 'Shenzhen'
  },
  {
    value: 'Guangzhou',
    label: 'Guangzhou'
  }
])

watch(value, (val) => {
  if (val.length === 0) {
    checkAll.value = false
    indeterminate.value = false
  } else if (val.length === selectList.value.length) {
    checkAll.value = true
    indeterminate.value = false
  } else {
    indeterminate.value = true
  }
})

const handleCheckAll = (val: CheckboxValueType) => {
  indeterminate.value = false
  if (val) {
    value.value = selectList.value.map((_) => _.value)
  } else {
    value.value = []
  }
}
</script>

<template>
  <div class="ai-container">
    <ul class="box left">
      <li>
        <div class="range top">
          <div class="input-box">
            <input type="text" placeholder="搜索一下感兴趣的讨论吧！" />
            <img src="../../assets/icons/search.svg" alt="" />
          </div>
          <div class="select-box">
            <el-select
              v-model="value"
              multiple
              clearable
              collapse-tags
              placeholder="请选择"
              popper-class="custom-header"
              :max-collapse-tags="1"
              style="width: 260px"
            >
              <template #header>
                <el-checkbox
                  v-model="checkAll"
                  :indeterminate="indeterminate"
                  @change="handleCheckAll"
                >
                  全部
                </el-checkbox>
              </template>
              <el-option
                v-for="item in selectList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </div>
        </div>
        <div class="range buttons">
          <div class="button-box">
            <span data-id="0" :class="{ active: isActiveIndex === 0 }" @click="active"
              >最新回复</span
            >
            <span data-id="1" :class="{ active: isActiveIndex === 1 }" @click="active"
              >最新发布</span
            >
          </div>
        </div>
        <div class="range content-box">
          <router-view></router-view>
        </div>
      </li>
    </ul>
    <ul class="box right">
      <li>
        <div class="range flex">
          <img src="../../assets/icons/me.svg" alt="" />
          <span>Admin</span>
        </div>
      </li>
      <li>
        <div class="range">
          <p>发表讨论</p>
          <div class="publish-content">
            <div class="top">
              <h4>主题</h4>
              <input type="text" placeholder="在这里输入讨论贴的主题" />
            </div>
            <div class="bottom">
              <h4>内容</h4>
              <textarea placeholder="在这里输入讨论贴的内容" style="height: 340px"></textarea>
            </div>
            <div class="footer">
              <img src="../../assets/icons/image.svg" alt="" />
            </div>
          </div>
        </div>
        <div class="footer">
          <button>发表讨论</button>
        </div>
      </li>
    </ul>
  </div>
</template>

<style scoped lang="scss">
@import url('../../styles/function/discuss.scss');
</style>
